{extend name="public/container"}

{block name="content"}
<div class="layui-fluid">
    <div class="layui-row layui-col-space15" id="app">
        <!--搜索条件-->
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">搜索条件</div>
                <div class="layui-card-body">
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">状态</label>
                                <div class="layui-input-block">
                                    <select name="status">
                                        <option value="">全部</option>
                                        <option value="1">启用</option>
                                        <option value="0">禁用</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">关键词</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" name="keywords" placeholder="编号/账号/昵称">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="search" lay-filter="search"><i class="layui-icon layui-icon-search"></i>搜索</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="layui-card">
                    <!-- /.card-header -->
                    <div class="layui-card-body">
                        <div class="layui-btn-container">
                            <a class="layui-btn layui-btn-sm" onclick="$eb.createModalFrame('添加管理员', '/admin/system/user/create')">添加管理员</a>
                        </div>
                        <table class="layui-hide" id="list" lay-filter="list"></table>
                        <!--启用|禁用-->
                        <script type="text/html" id="checkBoxStatus">
                            <input type='checkbox' name='id' lay-skin='switch' value="{{d.id}}" lay-filter='status' lay-text='启用|禁用'  {{ d.status == 1 ? 'checked' : '' }}>
                        </script>
                        <script type="text/html" id="barDemo">
                            <button class="btn btn-info btn-xs" type="button" onclick="$eb.createModalFrame(this.innerText,'/admin/system/user/edit/{{d.id}}')"><i class="fa fa-edit"></i> 编辑</button>
                            <button class="btn btn-danger btn-xs" lay-event="del"><i class="fa fa-times"></i> 删除</button>
                        </script>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
</div>
{/block}

{block name="script"}
<script src="{__ADMIN_PATH}js/layuiList.js"></script>
<script>
    // 实例化form
    layList.form.render();
    layList.tableList('list', '/admin/system/user/list', function () {
        return [
            {field: 'id', title: '编号', width: 60, align: 'center'},
            {field: 'nickname', title: '昵称', align: 'center'},
            {field: 'username', title: '账号', align: 'center'},
            {field: 'roles', title: '身份', align: 'center'},
            {field: 'reg_at', title: '注册时间', align: 'center'},
            {field: 'reg_at', title: '注册IP', align: 'center'},
            {field: 'status', title: '状态', width: '6%', align: 'center', toolbar: '#checkBoxStatus'},
            {fixed: 'right', title:'操作', width: '20%', align: 'center', toolbar: '#barDemo'},
        ];
    });

    // 查询
    layList.search('search', function(where){
        layList.reload(where, true);
    });

    // 点击事件绑定
    layList.tool(function (event, data, obj) {
        switch (event) {
            case 'del':
                $eb.$swal('delete',function(){
                    $eb.axios.get('/admin/system/user/del/' + data.id).then(function(res){
                        if(res.status === 200 && res.data.code === 200) {
                            $eb.$swal('success',res.data.msg);
                            obj.del();
                        }else
                            return Promise.reject(res.data.msg || '删除失败')
                    }).catch(function(err){
                        $eb.$swal('error',err);
                    });
                })
                break;
        }
    });

    // 启用/禁用用户
    layList.switch('status',function (odj, value) {
        if (odj.elem.checked === true) {
            layList.baseGet('/admin/system/user/set_status/1/' + value, function(res) {
                layList.msg(res.msg, function() {
                    layList.reload();
                });
            });
        } else {
            layList.baseGet('/admin/system/user/set_status/0/' + value, function(res) {
                layList.msg(res.msg, function() {
                    layList.reload();
                });
            });
        }
    });
</script>
{/block}